<template>
<page>
  <p-header :title="pair"/>
  <GridLayout rows="*, auto" class="content">
    <ScrollView row='0' orientation="vertical">
      <StackLayout>
        <WebView height="400" :class="isAndroid? 'web-android' : ''" ref='web' @loadFinished="onLoadFinished" src='~/assets/www/layout.html'/>
        <GridLayout columns="*, *" paddingLeft="10" paddingRight="10">
          <StackLayout col="0">
            <GridLayout v-if="currentBuy.length > 0" columns="1*, 3*, 3*" class="trend-label">
              <label col="0" text="Buy"/>
              <label col="1" text="Price"/>
              <label col="2" text="Amount"/>
            </GridLayout>
            <GridLayout  v-for="(item, index) in currentBuy" columns="1*, 3*, 3*" class="trend-values" :key="index">
              <label col="0" :text="index+1"/>
              <label col="1" :text="item.price.toFixed(5)" class="price-buy"/>
              <label col="2" :text="item.amount.toFixed(5)"/>
            </GridLayout>
          </StackLayout>
          <StackLayout col="1">
            <GridLayout v-if="currentSell.length > 0" columns="3*, 3*, 1*" class="trend-label">
              <label col="0" text="Price"/>
              <label col="1" text="Amount"/>
              <label col="2" text="Sell" horizontalAlignment="right"/>
            </GridLayout>
            <GridLayout  v-for="(item, index) in currentSell" columns="3*, 3*, 1*" class="trend-values" :key="index">
              <label col="0" :text="item.price.toFixed(5)" class="price-sell"/>
              <label col="1" :text="item.amount.toFixed(5)"/>
              <label col="2" :text="index+1" horizontalAlignment="right"/>
            </GridLayout>
          </StackLayout>
        </GridLayout>
      </StackLayout>
    </ScrollView>
    <StackLayout row='1' orientation="horizontal" class="btns button-bottom-nav">
        <Button class="btn buy" text="Buy" @tap="buy"/>
        <Button class="btn sell" text="Sell" @tap="sell"/>
        <StackLayout @tap="clickOnMark" verticalAlignment="center">
          <Image class="star" :src="markImage" />
          <label :class="markClass" :text="markText" />
        </StackLayout>
    </StackLayout>
  </GridLayout>
</page>
</template>
<script>
//const series = require("~/assets/fake/home-page.json");
const webViewInterfaceModule = require("nativescript-webview-interface");
const platform = require("tns-core-modules/platform");
import Header from '~/components/common/Header'
import {dataBus} from '~/business/DataBus'
import loaderGen, {loadingOption} from '~/utils/loading'

export default {
    data() {
        return {
            isMarked: false,
            currentSell: [],
            currentBuy: [],
            isAndroid: platform.isAndroid
        }
    },
    props: ['pair'],
  components: {
    "p-header": Header,
  },
  mounted() {
    this.loader = loaderGen()
    this.loader.show(loadingOption)
    const webView = this.$refs.web.nativeView;
    if (platform.isIOS) {
      webView.ios.backgroundColor = UIColor.clearColor;
      webView.ios.opaque = false;
    }
    this.oLangWebViewInterface = new webViewInterfaceModule.WebViewInterface(
      webView
    );
    this.isMarked = dataBus.isMarked(this.pair)
    this.loadLatestExchange()
    const that = this
    this.loadExchangeInterval = setInterval(function() {
      that.loadLatestExchange()
      that.loadLatestMarketInfo()
    }, 10000)
    this.handleEventFromWebView()
  },
  computed: {
    markImage() {
        return this.isMarked ? '~/images/marked.png' : '~/images/mark.png'
    },
    markClass() {
      return this.isMarked? 'mark-active' : 'mark-text'
    },
    markText() {
      return this.isMarked? 'Added' : 'Add'
    }
  },
  methods: {
    onLoadFinished() {
      const self = this
      dataBus.loadMarketHistory(this.pair, {
        onSuccess: (ret) => {
          if (ret.candles && ret.candles.length > 0) {
            self.lastCandles = ret.candles
          }
          self.oLangWebViewInterface.emit("loadCandles", {
            data: ret.candles,
            pair: self.pair
          });
          self.loader.hide()
        },
        onError: (code, msg) => {
          self.loader.hide()
          alert(msg)
        }
      })
    },
    loadLatestMarketInfo() {
      const self = this
      if (this.lastCandles && this.lastCandles.length > 0) {
        let timestamp = this.lastCandles[this.lastCandles.length-1].timestamp
        dataBus.loadLatestMarketHistory(this.pairA, this.pairB, timestamp, {
          onSuccess: (ret) => {
            self.lastCandles.concat(ret.candles)
            self.oLangWebViewInterface.emit("updateCandles", {
              data: self.lastCandles,
              pair: self.pair
            });
          }
        })
      }
    },
    handleEventFromWebView(){
      this.oLangWebViewInterface.on('updating', function(eventData){
          console.log(eventData)
      });
    },
    buy() {
        this.$navigateBack()
        dataBus.changeAppIndex(3, {
            isSell: false,
            pair: this.pair,
        })
    },
    sell() {
        this.$navigateBack()
        dataBus.changeAppIndex(3, {
            isSell: true,
            pair: this.pair,
        })
    },
    clickOnMark() {
      dataBus.markPair(this.pair)
      this.isMarked = dataBus.isMarked(this.pair)
    },
    loadLatestExchange() {
      const that = this
      let pairA = this.pair.split('/')[0],
        pairB = this.pair.split('/')[1]
      dataBus.loadLatestExchange(pairA, pairB, {
        onSuccess: ret => {
          let sell = ret.sellOrders
          let buy = ret.buyOrders
          that.currentSell = sell
          that.currentBuy = buy
        }
      })
    }
  },
  beforeDestroy() {
    clearInterval(this.loadExchangeInterval)
  },
};
</script>
<style scoped>
page {
  background-color: #15283f;
}

.web-android {
  margin: -10;
}

.btns {
    border-top-width: 1;
    border-top-color: #273847;
    width: 100%;
    height: 49;
}
 .btn {
    width: 120;
    height: 30;
    border-radius: 2;
    color: white;
    font-size: 14;
    padding: 0;
  }
  .buy {
      background-color: #00CE7D;
  }
  .sell {
      background-color: #E55541;
  }
  .star {
    width: 18;
    height: 18;
  }

  .mark-text {
    font-size: 10;
    color: #5B88B3;
  }

  .mark-active {
    font-size: 10;
    color: #01ECF4;
  }

  .trend-values {
    height: 20;
    margin-top: 10;
    color: #6292BE;
    font-size: 12;
  }
  .price-sell {
    color: #E55541;
  }
  .price-buy {
    color: #00CE7D;
  }
  .trend-label {
    height: 17;
    color: #6292BE;
    font-size: 12;
    margin-top: 18;
    margin-bottom: 2;
  }
</style>

